﻿@namespace BootstrapBlazor.Components
@inherits AutoComplete

<div class="search" @ref="AutoCompleteElement">
    <div class="@ClassString">
        <div class="input-group">
            <input @attributes="AdditionalAttributes" @ref="FocusElement" class="@ClassName" autocomplete="off" type="@Type" placeholder="@PlaceHolder" @bind-value="@CurrentValueAsString" @bind-value:event="oninput" @onblur="OnBlur" @onkeyup="OnKeyUp" />
            @if (ShowClearButton)
            {
                <Button Color="ClearButtonColor" Text="@ClearButtonText" Icon="@ClearButtonIcon" OnClick="OnClearClick" />
            }
            <Button Color="SearchButtonColor" Text="@SearchButtonText" Icon="@ButtonIcon" OnClick="OnSearchClick" />
        </div>
        <div class="select-dropdown">
            <ul class="dropdown-list">
                @if (FilterItems.Any())
                {
                    @foreach (var item in FilterItems)
                    {
                        <li class="dropdown-item" @onmousedown="e => OnClickItem(item)">
                            <div>@item</div>
                        </li>
                    }
                }
                else
                {
                    <li class="dropdown-item">@NoDataTip</li>
                }
            </ul>
        </div>
    </div>
    <CascadingValue Value="this" IsFixed="true">
        @ChildContent
    </CascadingValue>
</div>
